<template>
  <div>
    <div class="tableBox">
      <div class="topSearch">
        <div class="form">
          <el-form
            ref="form"
            :model="searchParams"
            label-width="10px"
            class="formSelf"
          >
            <el-form-item>
              <el-input
                placeholder="驾驶员"
                v-model="searchParams.carDriver"
              ></el-input>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchParams.carStatus"
                placeholder="请选择车辆状态"
              >
                <el-option
                  v-for="item in options1"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-select
                v-model="searchParams.carType"
                placeholder="请选择车辆类型"
              >
                <el-option
                  v-for="item in options2"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button
                class="search"
                icon="el-icon-search"
                @click="searchForm"
                >查询</el-button
              >
              <el-button
                class="reset"
                icon="el-icon-refresh-right"
                @click="resetForm"
                >重置</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
      <div class="table">
        <el-table :data="tableData" style="width: 100%">
          <el-table-column prop="carLicenseId" label="车牌号" width="140">
          </el-table-column>
          <el-table-column prop="carDriver" label="关联驾驶员">
          </el-table-column>
          <el-table-column prop="carStatus" label="车辆状态">
            <template slot-scope="scope">
              <div
                :class="{
                  yellowC: scope.row.carStatus == 1,
                  redC: scope.row.carStatus == 3,
                }"
              >
                {{ scope.row.carStatusDesc }}
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="carTypeDesc" label="车辆类型">
          </el-table-column>
          <el-table-column prop="gasStatus" label="车辆图片">
            <template slot-scope="scope">
              <div>
                <el-image
                  style="width: 100px; height: 50px"
                  :src="scope.row.carImage"
                  :preview-src-list="scope.row.srcList"
                >
                </el-image>
              </div>
            </template>
          </el-table-column>

          <el-table-column align="center" prop="address" label="操作">
            <template slot-scope="scope">
              <div class="btnBox">
                <div
                  slot="reference"
                  class="first"
                  @click="addVehicle(scope.row)"
                >
                  修改
                </div>
                <div
                  slot="reference"
                  class="first"
                  @click="deleteVehicle(scope.row)"
                >
                  删除
                </div>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="footerPage">
        <el-pagination
          :current-page="searchParams.page"
          :page-sizes="[10, 20, 30, 50]"
          :page-size="10"
          layout="total, sizes, prev, pager, next"
          :total="tableTotal"
          @size-change="handleSizeChange"
          @current-change="currentPage"
        />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "",
  props: {},
  components: {},
  data() {
    return {
      searchParams: {
        page: 1,
        pageSize: 10,
      },
      options1: [],
      options2: [],
      tableData: [],
      tableTotal: null,
    };
  },
  methods: {
    searchForm() {},
    resetForm() {},
    addVehicle() {},
    deleteVehicle() {},
    handleSizeChange() {},
    currentPage() {},
  },
  mounted() {},
  watch: {},
  computed: {},
  filters: {},
};
</script>

<style scoped lang="scss">
.tableBox {
  margin-top: 16px;
  background-color: #fff;
  padding: 16px;

  .topSearch {
    background-color: #fff;
    height: 68px;
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    .formSelf {
      display: flex;
      align-items: center;
      height: 68px;
      display: flex;
      align-items: center;
      .el-form-item {
        margin-bottom: 0px;
      }
      .search {
        background-color: #0077ff;
        color: #fff;
      }
      .reset {
        color: #0077ff;
        border: 1px solid #0077ff;
      }
      ::v-deep.el-input__inner {
        // background-color: #F5F5FA !important;
        color: #333 !important;
      }
      .el-input {
        width: 150px;
      }
      .el-select {
        width: 150px;
      }
    }
  }
  .footerPage {
    padding: 0 30px 0 0;
    display: flex;
    justify-content: right;
    width: 100%;
    background-color: #f8fafc;
    height: 50px;
    align-items: center;
    margin-top: 10px;

    //  ::v-deep .el-pagination .btn-next, .el-pagination .btn-prev{
    //   background-color: #087 !important;
    // }
  }
}
</style>
